<template>
  <div class="wrap commom_page_bg">
    <div id="stack"
         ref="stack" />
  </div>
</template>

<script>
import echarts from 'echarts'

// echarts字体大小适配
const font = document.documentElement.clientWidth
window.echartsFont = font / 1920

const colorArr = [
  {
    colorStart: 'rgba(6, 19, 49, 1)',
    colorStop: 'rgba(35, 201, 251, 1)'
  },
  {
    colorStart: 'rgba(39,138,242,0.01)',
    colorStop: '#278af2'
  },
  {
    colorStart: 'rgba(39,138,242,0.01)',
    colorStop: '#4151fb'
  },
  {
    colorStart: 'rgba(39,138,242,0.01)',
    colorStop: '#fb6463'
  },
  {
    colorStart: 'rgba(39,138,242,0.01)',
    colorStop: '#eaa930'
  }
]
function generateSeries (arr) {
  let seriesArr = []
  seriesArr = arr.map((item, index) => {
    return {
      name: item.name,
      type: 'bar',
      stack: '总量',
      barWidth: '50%',
      label: {
        normal: {
          show: true,
          color: 'white',
          formatter: '{c}\n{a|{a}}',
          fontSize: 18,
          position: 'inside',
          align: 'center',
          fontWeight: 'bold',
          rich: {
            a: {
              color: '#fff',
              fontSize: 14,
              lineHeight: 22,
              align: 'center',
              fontWeight: 'lighter'
            }
          }
        }
      },
      itemStyle: {
        normal: {
          barBorderRadius: [0, 50, 50, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0, color: colorArr[index].colorStart // 0% 处的颜色
          }, {
            offset: 1, color: colorArr[index].colorStop// 100% 处的颜色
          }], false)
        }
      },
      data: [{
        name: item.name,
        value: item.value
      }]
    }
  })
  return seriesArr
}

export default {
  components: {},
  props: {},
  data () {
    return {
      option: {
        legend: {
          show: false,
          top: '0%',
          left: '0%',
          textStyle: {
            color: '#cbccce',
            fontSize: 14
          },
          itemGap: 22,
          itemWidth: 14,
          itemHeight: 14,
          data: []
        },
        grid: {
          left: '0%',
          right: '0%',
          bottom: '0%',
          top: '0%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          show: false
        },
        yAxis: {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 14,
            padding: [0, 20, 0, 0],
            color: 'white'
          },
          data: ['']
        },
        series: []
      }
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.setEcharts()
  },
  beforeDestroy () { },
  methods: {
    setEcharts () {
      const dom = this.$refs.stack
      echarts.dispose(dom)
      this.myEcharts = echarts.init(dom)
      const mockData = [{ name: '测试1', value: 30 }, { name: '测试2', value: 35 }, { name: '测试3', value: 40 }, { name: '测试4', value: 35 }, { name: '测试5', value: 60 }]
      const mySeries = generateSeries(mockData)
      //   this.option.xAxis.max = 205
      this.option.series = mySeries
      this.myEcharts.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
#stack {
  margin: 300px auto;
  width: 160vh;
  height: 120px;
}
</style>
